<template>
  <div class="swiper">
    <div
      class="swiper-wrapper"
      :style="{ transform: `translateX(${-currentIndex * 100}px)` }"
    >
      <div v-for="(item, index) in items" :key="index" class="swiper-slide">
        <div class="image-box" @click="getPicture(item)">
          {{ index }}
          <!-- 使用宽高为100px的盒子来代替图片 -->
        </div>
      </div>
    </div>

    <el-row style="padding-top:10vh">
      <el-col :span="2">
        <button class="swiper-button-prev" @click="prevSlide">向左</button>
      </el-col>
      <el-col :span="20">
        <div class="swiper-pagination">
          <span
            v-for="(item, index) in items"
            :key="index"
            :class="{ active: index === currentIndex }"
            @click="goToSlide(index)"
          ></span>
        </div>
      </el-col>
      <el-col :span="2">
        <button class="swiper-button-next" @click="nextSlide">向右</button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'], // 图片数组
      currentIndex: 0 // 当前显示的图片索引
    }
  },
  methods: {
    prevSlide () {
      // 向左按钮点击事件
      this.currentIndex =
        (this.currentIndex - 1 + this.items.length) % this.items.length
    },
    nextSlide () {
      // 向右按钮点击事件
      this.currentIndex = (this.currentIndex + 1) % this.items.length
    },
    goToSlide (index) {
      // 点击圆点跳转到对应的图片
      this.currentIndex = index
    },
    getPicture (item) {
      console.log(item)
    }
  }
}
</script>

<style>
.swiper {
  position: relative;
  overflow: hidden;
  width: 60vh; /* 轮播容器的宽度 */
  height: 40vh; /* 轮播容器的高度 */
}

.swiper-wrapper {
  display: flex;
  transition: transform 0.3s;
}

.swiper-slide {
  flex: 0 0 100px; /* 每个轮播项的宽度 */
}

.swiper-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.swiper-pagination span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: gray;
  margin: 0 5px;
  cursor: pointer;
}

.swiper-pagination span.active {
  background-color: black;
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
}

.swiper-button-prev {
  left: 5px;
}

.swiper-button-next {
  right: 5px;
}

.image-box {
  border: 1px solid green;
  width: 20vh;
  height: 20vh;
}
</style>
